<template>
  <div>
    <el-form ref="form" :model="FormData" :rules="rules" label-width="100px">
      <el-row>
        <div class="title">
          <div class="title-bar"></div>
          <div>{{ $t('报关信息') }}</div>
        </div>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item :label="$t('报关中文名') + ':'" prop="customsClearanceNameCn">
            <el-input size="small" v-model="FormData.customsClearanceNameCn"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item :label="$t('报关日文名') + ':'" prop="customsClearanceNameJp">
            <el-input size="small" v-model="FormData.customsClearanceNameJp"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item :label="$t('报关英文名') + ':'" prop="customsClearanceNameEn">
            <el-input size="small" v-model="FormData.customsClearanceNameEn"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 商品用途 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item :label="$t('商品用途--中') + ':'" prop="skuUseCn">
            <el-input size="small" v-model="FormData.skuUseCn"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('商品用途--日') + ':'" prop="skuUseJp">
            <el-input size="small" v-model="FormData.skuUseJp"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('商品用途--英') + ':'" prop="skuUseEn">
            <el-input size="small" v-model="FormData.skuUseEn"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 商品材质 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item :label="$t('商品材质--中') + ':'" prop="skuMaterialCn">
            <el-input size="small" v-model="FormData.skuMaterialCn"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('商品材质--日') + ':'" prop="skuMaterialJp">
            <el-input size="small" v-model="FormData.skuMaterialJp"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('商品材质--英') + ':'" prop="skuMaterialEn">
            <el-input size="small" v-model="FormData.skuMaterialEn"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!--  -->
      <el-row :gutter="20">
        <el-col :span="9">
          <el-form-item :label="$t('国内发货方式') + ':'" prop="deliverWayCn">
            <el-select @change="setRate" v-model="FormData.deliverWayCn">
              <el-option
                :label="item.label"
                :value="item.value"
                v-for="(item, index) in deliver_goods_cn_list"
                :key="index"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="$t('国内发货倍率') + ':'" prop="deliverRate">
            <div>{{ FormData.deliverRate }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item :label="$t('jan编码') + ':'" prop="janCode">
            <el-input size="small" v-model="FormData.janCode">
              <template slot="append">
                <el-button @click="handleJanCode">{{ $t('分配') }}</el-button>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="9">
          <el-form-item :label="$t('快递公司')" prop="expressCompanyId">
            <el-select @change="setRate" v-model="FormData.expressCompanyId">
              <el-option :label="item.expressName" :value="item.id" v-for="item in expressCompanyList" :key="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 最近采购价格 -->
      <div style="margin-left: 100px">
        <el-row style="margin-bottom: 15px">
          <el-col style="white-space: nowrap">{{ $t('最近采购价格') }}: {{ FormData.price }} JPY</el-col>
        </el-row>
        <el-row style="margin: 15px 0">
          <el-col :span="5">{{ $t('关税税率') }}: {{ FormData.hsCodeRate }} %</el-col>
          <el-col :span="5"> {{ $t('关税金额') }}: {{ (FormData.price * FormData.hsCodeRate).toFixed() }} JPY</el-col>
        </el-row>
        <el-row style="margin: 15px 0">
          <el-col :span="5">{{ $t('综合云税率') }}: {{ FormData.consumeRate }} %</el-col>
          <el-col :span="5">
            {{ $t('综合云税金额') }}: {{ ((FormData.price * FormData.consumeRate) / 100 || 0).toFixed() }} JPY
          </el-col>
        </el-row>
        <el-row style="margin: 15px 0">
          <el-col :span="5">{{ $t('本地消费税') }}: {{ FormData.localConsumeRate }} %</el-col>
          <el-col :span="5">
            {{ $t('本地消费税金额') }}: {{ ((FormData.price * FormData.localConsumeRate) / 100 || 0).toFixed() }} JPY
          </el-col>
        </el-row>
      </div>
      <el-row>
        <el-form-item :label="$t('特殊属性')" prop="skuNameEn">
          <el-checkbox-group style="display: flex" v-model="FormData.specialStats">
            <el-checkbox :label="item.label" v-for="(item, index) in special_attribute_list" :key="index" />
          </el-checkbox-group>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item :label="$t('HS编码') + ':'" prop="skuNameEn">
          <el-input size="small" v-model="FormData.hsCode" :placeholder="$t('未填写')"></el-input>
        </el-form-item>
      </el-row>
    </el-form>
    <div style="text-align: right">
      <el-button
        type="primary"
        @click="submitForm"
        v-hasPermi="['distribution:skuDistributor:updateSkuAttrCustomsClearanceDetails']"
      >
        {{ $t('保存修改') }}
      </el-button>
      <el-button @click="cancel">{{ $t('关闭') }}</el-button>
    </div>
  </div>
</template>

<script>
import { useDict } from '@/utils/useDict'
import { getInfo, setInfo, initSkuJanCode, expressCompanyList } from '@/api/distribution/sku/customsInformation'
export default {
  name: 'ErpDistributionSystemPlusCustomsInformation',
  data() {
    return {
      expressCompanyList: [],
      /**国内发货方式 */
      deliver_goods_cn_list: [],
      backFormDate: {
        specialStats: [],
      },
      /**特殊属性 */
      special_attribute_list: [],
      FormData: {
        specialStats: [],
      },
      rules: {
        sku: [{ required: true, message: '请输入', trigger: 'blur' }],
        customsClearanceNameCn: [{ validator: this.validLength, required: true, trigger: 'change' }],
        customsClearanceNameJp: [{ validator: this.validLength, required: false, trigger: 'change' }],
        customsClearanceNameEn: [{ validator: this.validLength, required: false, trigger: 'change' }],

        skuUseCn: [{ validator: this.validLength, required: false, trigger: 'change' }],
        skuUseJp: [{ validator: this.validLength, required: false, trigger: 'change' }],
        skuUseEn: [{ validator: this.validLength, required: false, trigger: 'change' }],
        skuMaterialCn: [{ validator: this.validLength, required: false, trigger: 'change' }],
        skuMaterialJp: [{ validator: this.validLength, required: false, trigger: 'change' }],
        skuMaterialEn: [{ validator: this.validLength, required: false, trigger: 'change' }],
      },
    }
  },
  async created() {
    await useDict('special_attribute').then(
      ({ special_attribute }) => (this.special_attribute_list = special_attribute),
    )
    await useDict('deliver_goods_cn').then(({ deliver_goods_cn }) => (this.deliver_goods_cn_list = deliver_goods_cn))
    await this.getInfo()
    expressCompanyList().then((res) => {
      this.expressCompanyList = res.rows
    })
  },
  async mounted() {},

  methods: {
    /**验证长度 */
    validLength(rule, value, callback) {
      const { field } = rule
      const strLength = value?.length || 0

      // customsClearanceNameCn
      if (field == 'customsClearanceNameCn') {
        if (!value) {
          return callback(new Error(`请输入`))
        }
        //  长度最大为 255
        if (strLength > 255) {
          return callback(new Error(`文字超长 ${strLength} / 255`))
        }
      }

      const fields = [
        'skuUseCn',
        'skuUseJp',
        'skuUseEn',
        'skuMaterialCn',
        'skuMaterialJp',
        'skuMaterialEn',
        'customsClearanceNameJp',
        'customsClearanceNameEn',
      ]
      // 名称 长度最大为 255
      if (fields.includes(field)) {
        if (strLength > 255) {
          return callback(new Error(`文字超长 ${strLength} / 255`))
        }
      }
      return callback()
    },
    handleJanCode() {
      const skuId = this.$parent.$parent.skuInfo.skuId
      const data = {
        skuId,
      }
      initSkuJanCode(data).then((res) => {
        const { code, data, msg } = res
        if (code === 200) {
          this.$message({ type: 'success', message: msg })
          this.getInfo()
        }
      })
    },
    setRate(id) {
      const rate = this.deliver_goods_cn_list.filter((i) => i.value == id)
      if (rate && rate.length > 0) {
        this.FormData.deliverRate = rate[0].dictValueRef
      }
    },
    // 验证数据是否改变
    validFormData() {
      let FormDataChange = null
      if (JSON.stringify(this.backFormDate) == JSON.stringify(this.FormData)) {
        FormDataChange = false
      } else {
        FormDataChange = true
      }
      return FormDataChange
    },

    getInfo() {
      const skuid = this.$parent.$parent.skuInfo.skuId
      getInfo(skuid).then((res) => {
        this.$parent.$parent.updateSkuImg(res.data.imgUrl)
        this.FormData = res.data
        this.setRate(this.FormData.deliverWayCn)
        if (!this.FormData.specialStats) {
          this.FormData.specialStats = []
        } else {
          let arr = []
          this.FormData.specialStats.split(',').map((item) => {
            const exsitOne = this.special_attribute_list.map((i) => {
              if (i.value == item) {
                arr.push(i.label)
              }
            })
          })
          this.FormData.specialStats = arr
        }
        this.backFormDate = JSON.parse(JSON.stringify(this.FormData))
      })
    },
    submitForm() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          const data = JSON.parse(JSON.stringify(this.FormData))
          let arr = []
          this.FormData.specialStats.map((item) => {
            const exsitOne = this.special_attribute_list.filter((i) => i.label == item)
            if (exsitOne && exsitOne.length > 0) {
              arr.push(exsitOne[0].value)
            }
          })
          data.specialStats = arr.toString()
          setInfo(data).then((res) => {
            if (res.code == 200) {
              this.$message({ type: 'success', message: res.msg })

              this.getInfo()
              // this.cancel()
            }
          })
        }
      })
    },
    cancel() {
      this.$parent.$parent.cancel()
    },
  },
}
</script>

<style lang="scss" scoped>
.title {
  display: flex;
  align-items: center;
  height: 17px;
  font-size: 17px;
  margin: 10px 0 20px 0;

  &-bar {
    width: 2px;
    height: 100%;
    margin-right: 5px;
    background: #7b7979;
  }
}
</style>
